import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { deleteRole } from '@/mocks/roles';

interface RoleCardProps {
  role: any;
  onClick: () => void;
}

export default function RoleCard({ role, onClick }: RoleCardProps) {
  return (
    <motion.div 
      whileHover={{ y: -5 }}
      transition={{ duration: 0.3 }}
    >
      <div className="relative">
        <Link to={`/roles/${role.id}`} onClick={onClick}>
          <div className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 h-full flex flex-col">
            <div className="relative h-48 overflow-hidden">
              <img 
                src={role.image} 
                alt={role.name} 
                className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
              {role.isDefault && (
                <div className="absolute top-3 left-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
                  默认角色
                </div>
              )}
          </div>
          
          <div className="p-5 flex-grow flex flex-col">
            <h3 className="text-xl font-bold text-gray-800 mb-2">{role.name}</h3>
            <p className="text-gray-600 text-sm mb-4 flex-grow">{role.description}</p>
            
            <div className="mt-4">
              <div className="flex flex-wrap gap-2">
                {role.abilities.slice(0, 2).map((ability: string, index: number) => (
                  <span 
                    key={index} 
                    className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs"
                  >
                    {ability}
                  </span>
                ))}
                
                {role.abilities.length > 2 && (
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
                    +{role.abilities.length - 2}
                  </span>
                )}
              </div>
            </div>
            
            <button className="mt-5 w-full py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
              开始聊天
              <i className="fa-solid fa-arrow-right"></i>
            </button>
          </div>
        </div>
      </Link>
  <button 
    className="absolute -bottom-3 right-5 bg-red-500 text-white p-2 rounded-full shadow-md hover:bg-red-600 transition-colors"
    onClick={(e) => {
      e.stopPropagation();
      if (window.confirm(`确定要删除角色"${role.name}"吗？`)) {
        // 调用删除角色函数
        const deleted = deleteRole(role.id);
        if (deleted) {
          // 刷新页面以更新角色列表
          window.location.reload();
        } else {
          alert('删除失败，请重试');
        }
      }
    }}
  >
    <i className="fa-solid fa-trash"></i>
  </button>
    </div>
  </motion.div>
  );
}